<template>
	<view class="content">
		<u-form :model="userInfo" ref="form1" class="user-list list-border">
			<u-form-item label="姓名" prop="name" label-width="120">
				<u-input placeholder="请填写姓名" v-model="userInfo.name" />
			</u-form-item>
			<u-form-item label="性别" prop="sexs" label-width="120">
				<u-input v-model="select1.current.label" placeholder="请选择性别" type="select" @click="select1.show=true" />
			</u-form-item>
			<u-form-item label="身份证" prop="sfid" label-width="120">
				<u-input placeholder="请填写身份证" type="idcard" :maxlength="18" v-model="userInfo.sfid" />
			</u-form-item>
			<u-form-item label="手机号" prop="phone" label-width="120">
				<u-input placeholder="请填写手机号" :maxlength="11" v-model="userInfo.phone" />
			</u-form-item>
		</u-form>
		<u-select v-model="select1.show" :list="select1.list" @confirm="onSelect1"></u-select>
		<view class="bottom-button">
			<!-- <u-button shape="circle" type="primary" size="default" @click="submit">提交</u-button> -->
			<view class="button" @click="submit">
				<span>提交</span>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				sexs: '请选择',
				show: false,

				tips: '',
				value: '',
				userInfo: {
					name: '',
					sex: '',
					sfid: '',
					phone: '',
					checkbox: ''
				},
				select1: {
					show: false,
					current: {},
					list: [{
							value: 1,
							label: '男'
						},
						{
							value: 2,
							label: '女'
						}
					],
				},
				useyzm: '',
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					sex: [{
						required: true,
						message: '请选择性别',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					sfid: [{
							required: true,
							message: '请输入身份证',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						},
						{
							pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
							transform(value) {
								return String(value);
							},
							message: '请输入正确身份证',
							trigger: 'blur,change'
						}
					],
					phone: [{
						required: true,
						message: '请输入就诊人手机号',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					},
						{
							len: 11,
							message: '请正确输入11位手机号',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						}]
				},

			}
		},
		watch: {
			value(newValue, oldValue) {
				//console.log('v-model', newValue);
			}
		},
		computed: {
			...mapState(['token'], ['userInfo']),
			...mapGetters(['hasLogin', 'getUserInfo']),
			getIcon() {
				return path => {
					return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
				}
			}
		},

		onShow() {
			if (this.hasLogin) {

			} else {

				uni.showModal({
					title: '提示',
					content: '登录后才可以操作',
					confirmText: '去登录',
					showCancel: false,
					success: function(res) {
						uni.reLaunch({
							url: '/pages/auth/login'
						})
					}
				});
				return;
			}

		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		},
		methods: {
			onSelect1(arr) {
				let current = arr[0];
				let label = current.label;
				this.select1.current = current;
				this.userInfo.sex = label;
				console.log("this.userInfo.sex", this.userInfo.sex)
			},
			submit() {
				this.$refs.form1.validate(valid => {
					if (valid) {
						this.addvisit()
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			cancel() {
				this.show = false
			},
			confirm(e) {
				this.sexs = e.value[0]
				this.userInfo.sex = e.value[0]
				this.show = false
			},
			addvisit() {

				console.log(this.userInfo)
				uni.showLoading({
					title: '提交中'
				})
				let user = this.userInfo
				this.$request('patient', 'submit', {
					Name: user.name,
					Sex: user.sex,
					IDCard: user.sfid,
					Mobile: user.phone
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						let doctorinfor = false
						uni.hideLoading();
						uni.redirectTo({
							url: `/pages/block/Visit/Visit?doctorinfor=${doctorinfor}`,
							fail(error) {
								console.log(error)
							}
						})
					}else{
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
							url: params.url
						})
					}
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				console.log(this.userInfo.phone)
				if (this.userInfo.phone == "") {
					this.showToast(this.list)
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			change(e) {
				console.log('change', e);
			}
		}
	}
</script>

<style>
	@import './addVisit.css'
</style>